<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择驾校</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->

    <style type="text/css">
        .dataItem i {
            display: none;
        }
        .dataItem.selected i {
            display: inline;
        }
    </style>
</head>

<body class="bg_w">
<div class="content-wrap">
    <div class="layui-row">

        <form class="layui-form layui-form-pane" id="from1">
            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-sm6 ss">
                    <label class="layui-form-label" style="width: 150px;">省市选择(<span class="selectCount">0</span>/<span class="totalCount">0</span>)</label>


                    <div class="layui-input-block" style="margin-left: 150px; position: relative;">
                        <input type="text" class="layui-input">
                        <button type="button" class="layui-btn btnSearch add_btn" style="position: absolute; right: 0; top: 0;">搜索</button>
                    </div>


                    <div class="dataList ">
                        <!--<div class="dataItem">-->
                            <!--<label class="itemLabel">重庆市</label>-->
                        <!--</div>-->
                        <!--<div class="dataItem selected">-->
                            <!--<label class="itemLabel">上海市</label>-->
                            <!--<i class="layui-icon layui-icon-ok"></i>-->
                        <!--</div>-->
                    </div>
                </div>
                <div class=" layui-col-sm6 jx">
                    <label class="layui-form-label" style="width: 150px;">驾校选择(<span class="selectCount">0</span>/<span class="totalCount">0</span>)</label>

                    <div class="layui-input-block" style="margin-left: 150px;position: relative;">
                        <input type="text" class="layui-input">
                        <button type="button" class="layui-btn btnSearch add_btn" style="position: absolute; right: 0; top: 0;">搜索</button>
                    </div>

                    <div class="dataList ">
                        <!--<div class="dataItem">-->
                            <!--<label class="itemLabel">驾校一</label>-->
                        <!--</div>-->
                        <!--<div class="dataItem selected">-->
                            <!--<label class="itemLabel">驾校二</label>-->
                            <!--<i class="layui-icon layui-icon-ok"></i>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="layui-input-block">
                <button type="button" id="btnClose" class="layui-btn layui-btn-primary btn-left">关闭</button>
                <button type="button" id="btnSubmit" class="layui-btn add_btn btn-left">确认</button>
            </div>
        </form>
    </div>
</div>
</body>

<script>
    var isBatch = 0;    // 0为选择单个；1位选择多个
    var cityList = [];
    var dsList = [];
    var $;
    layui.use(['form','layer'], function() {
        $ = layui.$;
        var form = layui.form,
            layer=layui.layer;

        $('#btnClose').on("click", function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

        $('#btnSubmit').on('click', function(){
            // 调用上级界面，返回选择的驾校
            if(dsList.length > 0) {
                if(isBatch == 1) {
                    window.parent.selectDriverSchool(dsList);
                } else {
                    window.parent.selectDriverSchool(dsList[0]);
                }
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            } else {
                layer.msg("请选择驾校");
            }
        });

        $(".ss").on("click", ".btnSearch", function() {
            // 搜索省市
            var searchKey = $(".ss input").val().trim();
            if(searchKey.length > 0) {
                $(".ss .dataItem").hide();
                $(".ss .dataItem :contains(" + $(".ss input").val() + ")").parent().show();
            } else {
                $(".ss .dataItem").show();
            }
        }).on("click", ".dataItem", function () {
            // 选择或取消省市
            var cityObj = $(this).data("data");
            if(isBatch == 1) {
                var isSelected = false;
                $.each(cityList, function (index, city) {
                    if(city.code == cityObj.code) {
                        isSelected = true;
                        cityList.splice(index, 1);
                        return false;
                    }
                });
                if(isSelected) {
                    $(this).removeClass("selected");
                    // 移除界面元素
                    $(".jx .dataItem[cityCode='" + cityObj.code + "']").remove();
                    // 移除选中的驾校
                    var jxCount = dsList.length;
                    for (var i = 0, j=0; j < jxCount; i++, j++) {
                        if(dsList[i].cityCode == cityObj.code) {
                            dsList.splice(i, 1);
                            i--;
                        }
                    }

                    loadCount();
                } else {
                    $(this).addClass("selected");
                    cityList.push(cityObj);
                    initDsList(cityObj.code);
                }
            } else {
                var isSelected = false;
                $.each(cityList, function (index, city) {
                    if(city.code == cityObj.code) {
                        isSelected = true;
                        return false;
                    }
                });
                // 清空选中的城市
                cityList = [];
                $(".ss .dataItem.selected").removeClass("selected");
                // 移除界面元素
                $(".jx .dataItem").remove();
                // 移除选中的驾校
                dsList = [];
                if(isSelected) {
                    loadCount();
                } else {
                    $(this).addClass("selected");
                    cityList.push(cityObj);
                    initDsList(cityObj.code);
                }
            }
        });

        $(".jx").on("click", ".btnSearch", function() {
            // 搜索驾校
            var searchKey = $(".jx input").val().trim();
            if(searchKey.length > 0) {
                $(".jx .dataItem").hide();
                $(".jx .dataItem :contains(" + $(".jx input").val() + ")").parent().show();
            } else {
                $(".jx .dataItem").show();
            }
        }).on("click", ".dataItem", function () {
            // 选择或取消驾校
            var dsObj = $(this).data("data");
            var isSelected = false;

            if(isBatch == 1) {
                $.each(dsList, function (index, ds) {
                    if(ds.id == dsObj.id) {
                        isSelected = true;
                        dsList.splice(index, 1);
                        return false;
                    }
                });
                if(isSelected) {
                    $(this).removeClass("selected");
                } else {
                    $(this).addClass("selected");
                    dsList.push(dsObj);
                }
            } else {
                $.each(dsList, function (index, ds) {
                    if(ds.id == dsObj.id) {
                        isSelected = true;
                        return false;
                    }
                });
                // 清空选中的驾校
                dsList = [];
                $(".jx .dataItem.selected").removeClass("selected");

                if(!isSelected) {
                    $(this).addClass("selected");
                    dsList.push(dsObj);
                }
            }
            loadCount();
        });

        var addCity = function (cityObj) {
            // cityList.push(cityObj);

            var html = [];
            html.push("<div class='dataItem'>");
            html.push(" <label class='itemLabel'>" + cityObj.parentName + "-" + cityObj.name + "</label>");
            html.push(" <i class='layui-icon layui-icon-ok'></i>");
            html.push("</div>");

            var $item = $(html.join(""));
            $item.data("data", cityObj);
            $(".ss .dataList").append($item);
        };
        var addDs = function (dsObj) {
            // dsList.push(dsObj);

            var html = [];
            html.push("<div class='dataItem' cityCode='" + dsObj.cityId + "'>");
            html.push(" <label class='itemLabel'>" + dsObj.code + "-" + dsObj.name + "</label>");
            html.push(" <i class='layui-icon layui-icon-ok'></i>");
            html.push("</div>");

            var $item = $(html.join(""));
            $item.data("data", dsObj);
            $(".jx .dataList").append($item);
        };

        var initCityList = function() {
            ax.get({
                url: backendWebUrl + "/api/common/queryCityList",
                success: function (res) {
                    if (res.code == 0) {
                        $.each(res.data, function (index, cityObj) {
                            addCity(cityObj);
                        });

                        // 初始化驾校列表
                        setTimeout(function () {
                            if($(".ss .dataItem").length > 0) {
                                $(".ss .dataItem:eq(0)").click();
                            }
                        }, 500);
                    } else {
                        layer.msg(res.message);
                    }
                }

            });
        };

        var initDsList = function(cityId) {
            ax.get({
                url: backendWebUrl + "/api/common/queryDriverSchool",
                data: {ids:cityId},
                success: function (res) {
                    if (res.code == 0) {
                        $.each(res.data, function (index, dsObj) {
                            addDs(dsObj);
                        });
                        loadCount();
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
        };

        var loadCount = function () {
          $(".ss .selectCount").text(cityList.length);
          $(".ss .totalCount").text($(".ss .dataItem").length);
          $(".jx .selectCount").text(dsList.length);
          $(".jx .totalCount").text($(".jx .dataItem").length);
        };

        // 编辑初始化数据
        isBatch = getQueryString("isBatch");
        // 初始化城市列表
        initCityList();
        // 初始化驾校列表
        // initDsList();
    });
</script>


</html>